import router from './routes'
import VueRouter from 'vue-router'
import store from './store/index';
import Axios from 'axios'
import VueAxios from 'vue-axios'
import VuePhotoPreview from 'vue-photo-preview'
import 'vue-photo-preview/dist/skin.css'
import {mapState} from 'vuex'


/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

window.Vue = require('vue');
Vue.use(VueRouter);
Vue.use(VueAxios, Axios);
Vue.use(VuePhotoPreview);


/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

const app = new Vue({
    el: '#app',
    data() {
        return {
            height: "200px",
        }
    },
    router,
    store,
    methods: {
        goHome: function () {
            this.$router.push({path: "/"});
        },
        getHeight: function () {
            this.height = ($(window).height() - 125) + "px"
        }
    },
    created() {
        this.getHeight();
        if (this.$store.state.menus.length <= 0) {
            this.$store.dispatch('getMenus');
        }
    },

    computed: mapState(['menus']),
});
